<template>
  <div class="markdown-content">
    <vue-markdown></vue-markdown>
    <vue-markdown-utils></vue-markdown-utils>
    <el-button type="danger" @click="msgErrorShow">msgError</el-button>
    <el-button type="success" @click="msgSuccessShow">msgSuccess</el-button>
    <el-button type="primary" @click="msgConfirmShow">重提示(msgConfirm)</el-button>
    <el-button type="primary" @click="msgAlertShow">重提示(msgAlert)</el-button>
    <date-formate class="margin-t"></date-formate>
    <image-host class="margin-t"></image-host>
    <range-valid></range-valid>
  </div>
</template>

<script>
import VueMarkdown from './md/demo.md'
import VueMarkdownUtils from './md/msg.md'
import DateFormate from './md/dateFormat.md'
import ImageHost from './md/imgHost.md'
import RangeValid from './md/rangeValid.md'
// import Api from '@/api/base'
export default {
  name: 'Demo',
  components: {
    VueMarkdown,
    VueMarkdownUtils,
    DateFormate,
    ImageHost,
    RangeValid
  },
  data () {
    return {
    }
  },
  methods: {
    msgErrorShow () {
      this.msgError('操作失败')
    },
    msgSuccessShow () {
      this.msgSuccess('操作成功')
    },
    msgConfirmShow () {
      this.msgConfirm('此操作将删除该记录, 是否继续').then(() => {
        // doing
      })
    },
    msgAlertShow () {
      this.msgAlert('播放提示音失败，请点击确定继续重新播放提示音', '标题', {
        type: 'warning'
      }).then(() => {
        this.msgSuccess('操作成功')
      }).catch(() => {
        this.msgError('操作失败')
      })
    }
  },
  created () {
  }
}
</script>

<style>
  .markdown-content {
    padding: 20px;
  }
  .hljs-keyword {
    color: #e36209;
  }
  .hljs-string {color: #032f62;}
  .hljs-attr {color: #005cc5;}
  pre {
    padding: 16px;
    overflow: auto;
    font-size: 85%;
    line-height: 1.45;
    background-color: #f6f8fa;
    border-radius: 6px;
  }
</style>
